<template>
  <div>
     <el-button-group>
      <el-button type="plain" size="small" @click="$_zoomIn">放大</el-button>
      <el-button type="plain" size="small" @click="$_zoomOut">缩小</el-button>
      <el-button type="plain" size="small" @click="$_zoomReset">大小适应</el-button>
      <el-button type="plain" size="small" @click="$_translateRest">定位还原</el-button>
      <el-button type="plain" size="small" @click="$_reset">还原(大小&定位)</el-button>
      <el-button type="plain" size="small" @click="$_undo" :disabled="undoDisable">上一步(ctrl+z)</el-button>
      <el-button type="plain" size="small" @click="$_redo" :disabled="redoDisable">下一步(ctrl+y)</el-button>
      <el-button type="plain" size="small" @click="$_clear">清空</el-button>
      <el-button type="plain" size="small" @click="$_reDraw">重绘</el-button>
      <el-button type="plain" size="small" @click="$_exportData">下载数据</el-button>
      <!-- <el-button type="plain" size="small" @click="$_showMiniMap">查看缩略图</el-button> -->
    </el-button-group>
    <el-upload style="display:inline-block; margin-left: -5px;" action="" :auto-upload="false" accept=".json" :multiple="false" :show-file-list="false" :on-change="$_importData">
      <el-button type="plain" size="small" >载入数据</el-button>
    </el-upload>
  </div>
</template>

<script>
export default {
  name: 'Control',
  props: {
    lf: Object || String,
    catTurboData: Boolean,
    graphData: Object
  },
  data () {
    return {
      undoDisable: true,
      redoDisable: true,
      dataVisible: false,
      a: document.createElement('a'),
      fileName: 'data',
      jsonText: '',
      reader:null
    }
  },
  mounted () {
    this.$props.lf.on('history:change', ({ data: { undoAble, redoAble } }) => {
      this.$data.undoDisable = !undoAble
      this.$data.redoDisable = !redoAble
    });
  },
  methods: {
    $_zoomIn () {
      this.$props.lf.zoom(true)
    },
    $_zoomOut () {
      this.$props.lf.zoom(false)
    },
    $_zoomReset () {
      this.$props.lf.resetZoom()
    },
    $_translateRest () {
      this.$props.lf.resetTranslate()
    },
    $_reset () {
      this.$props.lf.resetZoom()
      this.$props.lf.resetTranslate()
    },
    $_undo () {
      this.$props.lf.undo()
    },
    $_redo () {
      this.$props.lf.redo()
    },
    $_clear () {
      this.$emit('clear')
    },
    $_reDraw () {
      this.$props.lf.render(this.$props.lf.getGraphRawData())
    },
    $_exportData () {
      this.$emit('exportData')
      this.$Modal.confirm({
          render: (h) => {
            return h('Input', {
              props: {
                value: this.fileName,
                placeholder: '请输入文件名',
                autofocus: true
              },
              on: {
                input: (val) => {
                  this.fileName = val
                }
              }
            })
          },
          onOk: () => {
            this.jsonText = JSON.stringify(this.graphData, null, 4)
            this.a.download = this.fileName + '.json'
            this.a.href = window.URL.createObjectURL(new Blob([this.jsonText], {type: 'text/json' }))
            this.a.dispatchEvent(new MouseEvent('click'))
          }
        })
    },
    $_importData (file) {
      return new Promise((resolve, reject) => {
        // 检验是否支持 FileRender
        if (typeof FileReader === 'undefined') {
          reject('当前浏览器不支持FileReader')
        }
        // 执行读取json数据操作
        this.reader = new FileReader()
        this.reader.readAsText(file.raw)
        this.reader.onerror = (error) => {
          reject('json 文件解析失败', error)
        }
        this.reader.onload = () => {
          if (this.reader.result) {
            try {
              resolve(JSON.parse(this.reader.result))
            } catch (error) {
              reject('读取数据解析失败', error)
            }
          } else {
            reject('读取数据解析失败', error)
          }
        }
      }).then((res) => {
        this.$emit('data-import', res)
      })
    }
  }
}
</script>

<style scoped>
</style>
